<template>
  <div>
<h1>商品</h1>
<van-tabs v-model="active" @click="tap">
<top v-for="item in lists" :key="item.id" :title="item.name" :id="item.id">
  <template v-slot:nn>
    <h2>{{item.front_name}}</h2>
  </template>
</top>
  </van-tabs>

<div v-if="list!=''"></div>
<div v-else style="width:100%;text-align:center;"><van-loading size="24px">加载中...</van-loading></div>
  <van-card
  :price="item.retail_price"
  :title="item.goods_brief"
  :thumb="item.list_pic_url"
  v-for="item in list"
  :key="item.id"
  lazy-load	
  @click="golist(item.goods_desc,item.id)"
/>
  </div>
</template>

<script>
import top from '../components/top'
export default {
  data () {
    return {
      lists: '',
      active:1,
      num:1005000,
      list:''
    }
  },
  mounted() {
    this.getlists()
    this.getlist()
  },
  methods: {
    getlists(){
      this.$http('http://shop.bufantec.com/bufan/category/categoryNav?id=1005000','get').then(res=>{
        this.lists=res.data.navData
      })
    },
    tap(){
      this.num=this.active
      this.getlist()
    },
    getlist(){
 this.$http('http://shop.bufantec.com/bufan/goods/goodsList?categoryId='+this.num,'get').then(res=>{
        console.log(res.data.data);
       this.list=res.data.data
      })
    },
    golist(item,id){
      this.$router.push({path:'/xq',query:{item,id}})
    }
  },
  components:{
    top
  }
}
</script>

<style scoped>

</style>
